<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/mui.min.js"></script>   <!--引用mui.min框架-->
		<script src="js/app.js"></script>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/jquery.getUrlParam.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet"/>
		<style>
			ul {
				font-size: 18px;
				color: #000;
			}
			.spang{
				text-align: right;
				font-size: 18px;
				color: #8f8f94;
			}
			.mi-btn {
				padding: 10px;
			}
			.table-background{
				margin-top: 50px;
				background: #FFFFFF;
			}
			.tr{
				width: 100%;
				color: #330000;
				font-weight:bold
			}
			@-webkit-keyframes rotation{
				from {-webkit-transform: rotate(0deg);}
				to {-webkit-transform: rotateY(360deg);}
			}

			img{
				-webkit-transform: rotateY(360deg);
				animation: rotation 15s linear infinite;
				-moz-animation: rotation 15s linear infinite;
				-webkit-animation: rotation 15s linear infinite;
				-o-animation: rotation 15s linear infinite;
				border-radius: 250px;
				width: 200px;
				height: 88px;
			}
			table{
				border: 1px solid #CCCCCC;
				text-align: center;
			}
			button{
				margin: 8px;
			}
		</style>
	</head>
	<body>
		
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			
			<h1 class="mui-title" style="font-size: 25px;">Return Order</h1>
			<!--<a id='setting' class="mui-icon mui-icon-bars mui-pull-right"></a>-->
			
		</header>
		
		
		<div class="table-background">
			
			<img src="images/FAST kitchen.png" />
			<div><hr/></div>
			<!--表格的开始-->
			<table  width="94%"
					id="tb"
	       			border="1px"
	        		align="center">
			    <tr class="tr">
			    	<td width="15%;">Order Id</td>
			       	<td width="8%;">Table</td>
			        <td width="20%;">Food Name</td>
			        <td width="8%;">Number</td>
			    </tr>
			</table>
			<div id="info"></div>
			<div><hr/></div>
		</div>

		<script type="text/javascript" charset="utf-8">
			/**
			 * 定义接口
			 */
			var API="http://180.141.91.221:8069/RmApi/pos/get_order_details?"
			/**
			 * 方法开始
			 */
			var id_contact;
			function a(){
//				id_contact = UrlParam.paramValues("id_main");
				id_contact = location.search.slice(12);//接收id
				
				var source = new EventSource(API+"belonged_to_id="+id_contact+"&cooking_state=4");
				source.onmessage = function(event) {
					var str="";
					var id,table_number,state,food_name,number;   
					var result = event.data; 
					var refund=JSON.parse(result);
					
					$('#tb tr:gt(0)').remove();//删除之前的数据
					
					for ( i=0;i < refund.foods.length; i++) { //遍历data数组
	                        console.log("refund:"+refund.foods[i].id);
	                        
	                        foods_id=refund.foods[i].id; //订单id
	                        table_number=refund.foods[i].table_number;  //桌号
	                        food_name=refund.foods[i].food_name;  //菜名
	                        number=refund.foods[i].number;  //份量
	                        state=refund.foods[i].state;  //状态
	                        str += "<tr>"+
	                        "<td>"+foods_id+"</td>"+
	                        "<td class='tbtb'>"+table_number+"</td>"+
	                        "<td>"+food_name+"</td>"+
	                        "<td>"+number+"</td>"+
						    "</tr>";
	                    }
	                    $('#tb').append(str);
	                }
				};
			a();
		</script>
	</body>
</html>
